'use client'

import GradientButton from '@/components/common/GradientButton'
import OutlineButton from '@/components/common/OutlineButton'
const invoices = [
  {
    id: 'INV-2025-011',
    period: 'Nov 01–30, 2025',
    issued: 'Dec 1, 2025',
    amount: '$149.00',
    status: 'Payment Failed',
    color: 'bg-red-500',
    title: 'Try again'
  },
  {
    id: 'INV-2025-010',
    period: 'Oct 01–31, 2025',
    issued: 'Nov 1, 2025',
    amount: '$149.00',
    status: 'Paid',
    color: 'bg-green-500',
    title: 'Download PDF'
  },
  {
    id: 'INV-2025-009',
    period: 'Sep 01–30, 2025',
    issued: 'Oct 1, 2025',
    amount: '$149.00',
    status: 'Paid',
    color: 'bg-green-500',
    title: 'Download PDF'
  }
]

export default function BillingHistory() {
  return (
    <div className="upload-card w-full p-[16px]">
      <h2 className="text-lg font-semibold mb-6 text-white">Billing history</h2>

      <div className="flex flex-col gap-4">
        {invoices.map((inv) => (
          <div
            key={inv.id}
            className="flex flex-col md:flex-row md:items-center justify-between gap-4 border-solid border-[#1f2533] rounded-2xl px-[12px] py-[8px] bg-[#10141f]">
            {/* 左侧账单信息 */}
            <div className="flex items-start gap-3">
              <div className={`w-3 h-3 rounded-full mt-1 ${inv.color}`} />
              <div>
                <div className="flex items-center gap-2">
                  <h3 className="text-[15px] font-semibold text-white">Invoice #{inv.id}</h3>

                  {/* 状态标签 */}
                  {inv.status === 'Paid' ? (
                    <span className="text-[12px] bg-[#1d3826] text-green-400 px-2 py-0.5 rounded-md">Paid</span>
                  ) : (
                    <span className="text-[12px] bg-[#3b2323] text-red-300 px-2 py-0.5 rounded-md">Payment Failed</span>
                  )}
                </div>
                <p className="text-[12px] text-gray-400 mt-1">
                  Period: {inv.period} · Issued: {inv.issued}
                </p>
              </div>
            </div>

            {/* 右侧金额与按钮 */}
            <div className="flex flex-col items-end gap-3 text-right min-w-[160px]">
              <div className="text-[18px] font-semibold text-white">{inv.amount}</div>

              {inv.title === 'Download PDF' ? (
                <OutlineButton
                  title={inv.title}
                  fontSize="13px"
                  width="120px"
                  height="36px"
                  radius="12px"
                  onClick={() => {}}
                />
              ) : (
                <GradientButton
                  title={inv.title}
                  fontSize="13px"
                  width="90px"
                  height="36px"
                  radius="12px"
                  onClick={() => {}}
                />
              )}
            </div>
          </div>
        ))}
      </div>
    </div>
  )
}
